<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

<title>Bin's World</title>
<link rel="shortcut icon" href="favicon/favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
<link rel="stylesheet" type="text/css" href="css/cssreset.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/mystyle.css">
<link href="css/sequence-theme.mono.css" rel="stylesheet" media="all">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/js.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script>
$(function(){
/*app旋转*/
	;(function(){
		$('.app ul li').each(function(index, element) {
			var index=index*45
			$(element).css({ transform:'rotateY('+index+'deg) translateZ(350px)' })
		});
	})();
})



</script>



</head>

<body>
<div class="music">
    <div id="caidan">
        <p class="song1 current" id="song1">Troye Sivan - YOUTH</p>
        <p class="song1" id="song2">Justin Bieber - What Do You Mean</p>
        <div id="close"></div>
    </div>
	<audio src="music/Troye Sivan - YOUTH.mp3" autoplay loop id="music"></audio>
    <div class="center" id="btn"></div>
    <div class="rao" id="rao"></div>

</div>
<div class="big">
<div class="click"></div>
<div class="nav">
	<ul>
        <li class="current"><span></span></li>
        <li><span></span></li>
        <li><span></span></li>
        <li><span></span></li>
        <li><span></span></li>
	</ul>
</div>
</div>
<section class="main">
	<div class="screen1 out">
        <div class="black1"></div>
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
        <div class="line4"></div>
        <div class="line5"></div>
        <div class="line6"></div>
    	<div class="menu animated fadeInLeft ">
        	<p><span>menu</span></p>
	  		<p class="img"><img src="images/menu-con .png" width="16px"alt=""/></p>
        </div>
        <div class="zhiyin"></div>
		<div class="heart animated fadeIn">
        	<div class="circle0"></div>
        	<div class="circle1"></div>
        	<div class="circle1-1"></div>
        	<div class="circle2-1"></div>
        	<div class="circle2-2"></div>

        	<div class="circle3"></div>
        	<div class="middle"></div>
        	<div class="up"></div>
            <p class="font animated bounce"></p>
        </div>



        <footer>
		</footer>
   	</div>


	<div class="screen2 out">
    	<div class="black"></div>
    	<div class="title">
        <p class="about animated zoomIn"></p>
        </div>
         <div class="content">
         	<p class="font1"></p>
         	<p class="font2"></p>
         	<p class="font3"></p>
         	<p class="font4"></p>
         	<p class="font5"></p>
         	<p class="font6"></p>
         	<p class="font7"></p>
         </div>
		<div class="flash"></div>
    	<aside>
        	<p><img src="images/about.jpg" width="200" alt=""/></p>
       		 <div class="kuang"></div>
         </aside>
        <div class="flash2"></div>
        <div class="flash3"></div>

        <article>
        	<div class="article-l"></div>
        	<div class="article-r"></div>
        </article>
    </div>


    <div class="screen3 out">
    <div class="black"></div>
    <div class="title2">
    <p class="skill"></p>
    </div>
    <p class="pao animated zoomIn"></p>
    <p class="skill-1"></p>
    <p class="skill-2"></p>
    <p class="skill-3"></p>
    <p class="skill-4"></p>
    <p class="skill-5"></p>
    <p class="skill-6"></p>
    <p class="skill-7"></p>
    <p class="skill-8"></p>
    </div>




	<div class="screen4 out">
    <div class="title-work"></div>
	 	<ul class="list">
            <li><span></span></li>
            <li><span></span></li>
            <li><span></span></li>
            <li><span></span></li>
	    </ul>

   		<div class="section">
            <div class="web">
                 <ul class="web-t web-1">
                    <li>
                    <a href="天猫/index.html"><span>电商战<br>天猫</span></a>
                    </li>
                    <li>
                        <a href="京东/index2.html"><span>电商战<br>京东</span></a>
                    </li>
                    <li>
                        <a href="1号店/index.html"><span>电商战<br>一号店</span></a>
                    </li>
                 </ul>
                 <ul class="web-t">
                    <li><a href="风讯/index.html"><span>企业站<br>风讯</span></a></li>
                    <li><a href="新纶/index.html"><span>企业站<br>新纶</span></a></li>
                    <li><a href="中国科技电子公司/index.html"><span>企业站<br>中国科技</span></a></li>
                 </ul>
            </div>
            <div id="sequence" class="seq">
            <ul class="seq-canvas">

              <li class="seq-step1 seq-valign seq-in">
                <div class="seq-vcenter">
                  <img data-seq class="seq-feature" src="images/bananas.png" alt="A cartoon illustration of a bunch of bananas" width="389" height="300" srcset="images/bananas.png 1x, images/bananas@2x.png 2x" />
                  <h2 data-seq class="seq-title">Bananas</h2>
                </div>
              </li>

              <li class="seq-step2 seq-valign">
                <div class="seq-vcenter">
                  <img data-seq class="seq-feature" src="images/coconut.png" alt="A cartoon illustration of half a coconut" width="325" height="300" srcset="images/coconut.png 1x, images/coconut@2x.png 2x" />
                  <h2 data-seq class="seq-title">Coconut</h2>
                </div>
              </li>

              <li class="seq-step3 seq-valign">
                <div class="seq-vcenter">
                  <img data-seq class="seq-feature" src="images/orange.png" alt="A cartoon illustration of a round orange" width="350" height="300" srcset="images/orange.png 1x, images/orange@2x.png 2x" />
                  <h2 data-seq class="seq-title">Orange</h2>
                </div>
              </li>
              <li class="seq-step3 seq-valign">
                <div class="seq-vcenter">
                  <img data-seq class="seq-feature" src="images/can.png" alt="A cartoon illustration of a round orange" width="350" height="300" srcset="images/can.png 1x, images/can@2x.png 2x" />
                  <h2 data-seq class="seq-title">Orange</h2>
                </div>
              </li>
              <li class="seq-step3 seq-valign">
                <div class="seq-vcenter">
                  <img data-seq class="seq-feature" src="images/btn.png" alt="A cartoon illustration of a round orange" width="350" height="300" srcset="images/btn.png 1x, images/btn@2x.png 2x" />
                  <h2 data-seq class="seq-title">Orange</h2>
                </div>
              </li>
              <li class="seq-step3 seq-valign">
                <div class="seq-vcenter">
                  <img data-seq class="seq-feature" src="images/fly.png" alt="A cartoon illustration of a round orange" width="350" height="300" srcset="images/fly.png 1x, images/fly@2x.png 2x" />
                  <h2 data-seq class="seq-title">Orange</h2>
                </div>
              </li>
            </ul>

            <fieldset class="seq-nav" aria-label="Slider buttons" aria-controls="sequence">

              <button type="button" class="seq-prev" aria-label="Previous">
                <img src="images/prev.svg" alt="Previous" />
              </button>

              <ul role="navigation" aria-label="Pagination" class="seq-pagination">
                <li class="seq-current">
                  <a href="#step1" rel="step1" title="Go to bananas">
                    <img src="images/tn-bananas@2x.png" alt="Bananas" width="50" height="40" />
                  </a>
                </li>
                <li>
                  <a href="#step2" rel="step2" title="Go to coconut">
                    <img src="images/tn-coconut@2x.png" alt="Coconut" width="50" height="40" />
                  </a>
                </li>
                <li>
                  <a href="#step3" rel="step3" title="Go to orange">
                    <img src="images/tn-orange@2x.png" alt="Orange" width="50" height="40" />
                  </a>
                </li>
                <li>
                  <a href="#step3" rel="step3" title="Go to orange">
                    <img src="images/tn-can@2x.png" alt="Orange" width="50" height="40" />
                  </a>
                </li>
                <li>
                  <a href="#step3" rel="step3" title="Go to orange">
                    <img src="images/tn-btn@2x.png" alt="Orange" width="50" height="40" />
                  </a>
                </li>
                <li>
                  <a href="#step3" rel="step3" title="Go to orange">
                    <img src="images/tn-fly@2x.png" alt="Orange" width="50" height="40" />
                  </a>
                </li>
              </ul>

              <button type="button" class="seq-next" aria-label="Next">
                <img src="images/next.svg" alt="Next" />
              </button>

            </fieldset>
          </div>
            <div class="ap"><div class="app">
              <ul>
                            <li style="transform: rotateY(0deg) translateZ(350px);"><a href="#" target="_blank"></a></li>
                            <li style="transform: rotateY(45deg) translateZ(350px);"><a href="#" target="_blank"></a></li>
                            <li style="transform: rotateY(90deg) translateZ(350px);"><a href="#" target="_blank"></a></li>
                            <li style="transform: rotateY(135deg) translateZ(350px);"><a href="#" target="_blank"></a></li>
                            <li style="transform: rotateY(180deg) translateZ(350px);"><a href="#" target="_blank"></a></li>
                            <li style="transform: rotateY(225deg) translateZ(350px);"><a href="#" target="_blank"></a></li>
                            <li style="transform: rotateY(270deg) translateZ(350px);"><a href="#" target="_blank"></a></li>
                            <li style="transform: rotateY(315deg) translateZ(350px);"><a href="#" target="_blank"></a></li>
                        </ul>
             </div></div>
            <div class="banner">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <p>
                    <span class="left"> < </span>
                    <span class="right"> > </span>
                </p>
            </div>
        	<div class="kaitou"><span></span></div>
  	   </div>


    	<div class="top"></div>
    	<div class="down"></div>
    	<p></p>
    </div>
	<div class="screen5 out">
    <div class="black"></div>
	<div class="last-font"></div>
    <div class="contact-b">
    	<div class="c-flash"></div>
    	<div class="contact"></div>
    	<div class="contact1">
        	<div class="qq"></div>
        	<div class="email"></div>
        	<div class="tel"></div>
        	<div class="wechat"></div>
        	<div class="ma"></div>
            <div class="final"></div>
        </div>
	</div>
    </div>
</section>

<div id="word">
    <div id="pic1" class="animated fadeInDown"></div>
    <div id="pic2"></div>
    <div id="pic3"></div>
    <div id="pic4"></div>
    <div id="pic5"></div>
    <div id="pic6"></div>
    <span id="arrow"></span>
</div>
<div id="upload" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo"></div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">上传图片</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="message-text" class="control-label">我的公众号二维码:</label>
                        <div style="overflow:hidden">
                            <div id="qrcode">
                                <img width="100%"  height="100%" id="qc" src="">
                                <p id="result1"></p>
                                <p id="name1"></p>
                            </div>
                            <!--<div id="filePicker1"><button  type="button" class="btn btn-primary upload">上传</button></div>-->
                            <div id="uploader-demo">
                                <!--用来存放item-->
                                <div id="fileList" class="uploader-list"></div>
                                <div id="filePicker">选择图片</div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary submit-message"  data-dismiss="modal">提交</button>
            </div>
        </div>
    </div>
</div>
<div id="coming">
    <div id="girl"></div>
    <div id="boy"></div>
</div>

<div class="wrap">
    <div class="type-wrap">
        <div id="typed-strings">
            <p>It's <strong>lisa and bin's</strong> world</p>
            <p><strong>保存珍贵的记忆</strong></p>
            <p>Share our happiness.</p>
            <p>Let's take a look!</p>
        </div>
        <span id="typed" style="white-space:pre;"></span>
    </div>


</div>

<script>
	var music=document.getElementById("music")
	var btn=document.getElementById("btn")
	var rao=document.getElementById("rao")
	btn.onclick=function(){
		if(music.paused == true){
			music.play()
			rao.style.animationPlayState='running'
		}else{
			music.pause()
			rao.style.animationPlayState='paused'
		}


	}


</script>
  <script src="scripts/imagesloaded.pkgd.min.js"></script>
  <script src="scripts/hammer.min.js"></script>
  <script src="scripts/sequence.min.js"></script>
  <script src="scripts/sequence-theme.mono.js"></script>
    <script src="js/typed.js" type="text/javascript"></script>

<script>
    $(function(){

        $("#typed").typed({
            // strings: ["Typed.js is a <strong>jQuery</strong> plugin.", "It <em>types</em> out sentences.", "And then deletes them.", "Try it out!"],
            stringsElement: $('#typed-strings'),
            typeSpeed: 30,
            backDelay: 500,
            loop: false,
            contentType: 'html', // or text
            // defaults to false for infinite loop
            loopCount: false,
            callback: function(){ foo(); },
            resetCallback: function() { newTyped(); }
        });

        $(".reset").click(function(){
            $("#typed").typed('reset');
        });

    });

    function newTyped(){ /* A new typed object */ }

    function foo(){ console.log("Callback"); }

</script>

<style>
    .wrap{
        max-width: 600px;
        margin:150px auto;
        position: absolute;
        top: 40px;
        width: 100%;
        color:#fff;
    }

    .type-wrap{
        margin:10px auto;
        padding:20px;
        font-size: 25px;
        text-align: center;
    }

    .links{
        margin:20px 0;
        font-size: 0.75em;
        text-align: center;
    }
    /* code for animated blinking cursor */
    .typed-cursor{
        opacity: 1;
        font-weight: 100;
        -webkit-animation: blink 0.7s infinite;
        -moz-animation: blink 0.7s infinite;
        -ms-animation: blink 0.7s infinite;
        -o-animation: blink 0.7s infinite;
        animation: blink 0.7s infinite;
    }
    @-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
    }
    @-webkit-keyframes blink{
        0% { opacity:1; }
        50% { opacity:0; }
        100% { opacity:1; }
    }
    @-moz-keyframes blink{
        0% { opacity:1; }
        50% { opacity:0; }
        100% { opacity:1; }
    }
    @-ms-keyframes blink{
        0% { opacity:1; }
        50% { opacity:0; }
        100% { opacity:1; }
    }
    @-o-keyframes blink{
        0% { opacity:1; }
        50% { opacity:0; }
        100% { opacity:1; }
    }
</style>

<script>
    $('#upload').click(function(){
        $("#myModal").modal('show');
    });


    var bigwidth = document.body.clientWidth;
    if(bigwidth>500) {
        $('.music').hover(function () {
            $('#caidan').stop().slideDown();
            $(this).css({width: '280px', height: '417px'})
        }, function () {
            $('#caidan').stop().slideUp();
        })
        document.title = 'Bin and Lisa'
    }
    if(bigwidth<500){
        $('.music').click(function () {
            var num =0;
            if(num%2 ==0){
                $('#caidan').show().addClass('animated fadeInDown');
                num++;
                console.log(num);
                return num
            }
            else{
                $('#caidan').removeClass('animated fadeInDown').addClass('animated fadeInDown');
            }
        })
        $('.close').click(function () {
            $('#caidan').removeClass('animated fadeInDown').addClass('animated fadeInDown');
        })
    }


    $('#song1').click(function(){
        $('#music').attr('src','music/Troye Sivan - YOUTH.mp3')
        $(this).addClass('current').siblings().removeClass('current')
    });
    $('#song2').click(function(){
        $('#music').attr('src','music/Justin Bieber - What Do You Mean.mp3')
        $(this).addClass('current').siblings().removeClass('current')

    })

</script>

</body>
</html>
